<svg 	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 400 450">
<defs>
 <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">
      <stop stop-color="#406666" offset="0%"/>
      <stop stop-color="#fcfcfc" offset="50%"/>
      <stop stop-color="#507676" offset="100%"/>
      <animate attributeName="x2" begin="start.click" dur="10s" values="0;0.25;0.5;0.75;1" repeatCount="1"/>
    </linearGradient>
<path id="path1" d="M92 262.5L92,137.5 200,75 308,137.5 308,262.5
                    200,325 92,262.5 92,137.5 200,75 308,137.5 308,262.5 200,325 92,262.5" fill="none" stroke="none"/>
   </defs>
<rect x='0' y='0' width='400' height='450' fill='#DDDDDD' stroke='black'/>
<rect x="1" y="1" width="398" height="378"
        fill="white" stroke="#507676" stroke-width="1" />
<polygon id="pol1" fill="url(#grad1)" stroke="#507676" stroke-width="1" 
            points="200,75  308,137.5 308,262.5
                    200,325 92,262.5 92,137.5" />
<text id="txt1" lengthAdjust="spacingAndGlyphs" textLength="700" font-size="24">
<textPath id="result" method="align" spacing="auto" startOffset="1%" xlink:href="#path1">
<tspan dy="-10"> Весь очень длинный текст целиком вокруг шестиугольника</tspan>
<animate begin="start.click" dur="10s" repeatCount="1" attributeName="startOffset" values="4%;54%"/> 
</textPath>
</text>
<g id="start">
<rect  x="285" y="387" rx="10" width="90" height="35" style="fill:#507676;"/>
<text x='300' y='412' fill="white" font-size="25">Старт</text> 
</g>
  <path id="path2" transform="scale(1.25) translate(-40 -40)" d="M92 262.5L92,137.5 200,75 308,137.5 308,262.5
                    200,325 92,262.5 92,137.5 200,75 308,137.5 308,262.5 200,325 92,262.5" fill="none" stroke="#507676" stroke-width="1" stroke-opacity="1"/> 
</svg>
